<template>
  <div class="m-b-10">
    <a-card
      direction="vertical"
      :size="12"
      fill
      :title="`年度数据总览（默认为当年数据）--- 无需更改,根据数据动态展示`"
    >
      <a-table
        :columns="columns"
        :data="yearDataList"
        size="large"
        :bordered="{ wrapper: true, cell: true }"
      >
        <!-- 品名 -->
        <template #manage_product_id="{ record }">
          <span>{{ getProductName(record.manage_product_id) }}</span>
        </template>
        <!-- 规格 -->
        <template #guige="{ record }">
          <span>{{ getGuige(record.manage_product_id) }}</span>
        </template>
        <!-- 数量 -->
        <template #num="{ record }">
          <span>{{ getNum(record.manage_product_id, record.num) }}</span>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <a-button type="text" @click="getManageDetial(record)">详情</a-button>
        </template>
      </a-table>
    </a-card>
    <MonthInfo ref="monthInfo" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { getYearData } from '@/api/manage';
import MonthInfo from './monthInfo.vue'

const monthInfo = ref(null)

const getManageDetial = (record) => {
  monthInfo.value.openDialog(record)
}
const props = defineProps({
  productNameList: { type: Array, default: () => [] },
  getProductName: { type: Function, default: () => {} },
  getGuige: { type: Function, default: () => {} },
  getNum: { type: Function, default: () => {} },
});
const yearDataList = ref([]);
const getYearInfo = async () => {
  const { data, code } = await getYearData();
  if (code === 200) {
    yearDataList.value = data;
  }
};

const columns = ref([
  {
    title: '品名',
    dataIndex: 'manage_product_id',
    slotName: 'manage_product_id',
  },
  {
    title: '规格',
    dataIndex: 'guige',
    slotName: 'guige',
  },
  {
    title: '年度供应量',
    dataIndex: 'num',
    slotName: 'num',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 100,
  },
]);

defineExpose({
  getYearInfo,
})
</script>

<style lang="scss" scoped></style>